<template>
<div class="add">
<el-form ref="addform" :model="form" :rules='rules' size="mini">
    <el-form-item label="供应商名称" prop="cmpName" :label-width="formLabelWidth">

      <el-input v-model="form.cmpName" @focus="findUser" clearable placeholder="请选择供应商名称">
        <i slot="suffix" class="el-input__icon el-icon-arrow-down" @click="findUser"></i>
      </el-input>

    </el-form-item>
    <el-form-item label="管理员账号" prop="usrCode" :label-width="formLabelWidth">
      <el-input v-model="form.usrCode" autocomplete="off" clearable  maxlength="50" ></el-input>
    </el-form-item>
    <el-form-item label="管理员名称" prop="usrName" :label-width="formLabelWidth">
      <el-input v-model="form.usrName" autocomplete="off" clearable maxlength="25" ></el-input>
    </el-form-item>
    <el-form-item label="联系电话" prop="usrCellphone" :label-width="formLabelWidth">
      <el-input v-model="form.usrCellphone" autocomplete="off" clearable></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="usrEmail" :label-width="formLabelWidth">
      <el-input v-model="form.usrEmail" autocomplete="off" clearable></el-input>
    </el-form-item>
    <el-form-item label="状态" prop="usrStatus"  :label-width="formLabelWidth">
      <el-radio-group v-model="form.usrStatus">
            <el-radio label="Y">可用</el-radio>
            <el-radio label="N">不可用</el-radio>
      </el-radio-group>
      <!-- <el-select v-model="form.usrStatus" clearable placeholder="请选择状态">
        <el-option
            v-for="item in status"
            :key="item.uuid"
            :label="item.names"
            :value="item.code"
          ></el-option>
      </el-select> -->
    </el-form-item>
    <el-form-item label="备注"  prop="remark" :label-width="formLabelWidth">
      <el-input v-model="form.remark" autocomplete="off" type="textarea" maxlength="150" show-word-limit></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button size="mini" @click="cancel">关 闭</el-button>
    <el-button size="mini" type="primary" @click="save">确 定</el-button>
  </div>
  <!-- 对话框 -->
  <el-dialog
  :modal-append-to-body='false'
  :modal='false'
  :visible.sync="dialogTableVisible"
  top="220px"
  @open="getUserList">
  <el-form ref="addformselect" :data='userform' label-width="auto" inline="true">
              <el-row :gutter="24" >
            <el-col :span="11">
              <el-form-item size="mini" label="供应商名称：" prop="fltName" label-width="115px" class="row">
                <el-input clearable maxlength="192" v-model="userform.fltName" size="mini" style="width: 100%"></el-input>
              <div class="clear"></div>
              </el-form-item>
            </el-col>
<!--            <el-col :span="10">-->
<!--              <el-form-item size="mini" label="所属港口：" prop="fltPorts" label-width="115px" class="row">-->
<!--                &lt;!&ndash; <el-input clearable v-model="userform.fltPorts"></el-input> &ndash;&gt;-->
<!--                <el-select  clearable v-model="userform.fltPorts" style="width: 100%" placeholder="请选择所属港口">-->
<!--                  <el-option-->
<!--                    v-for="(item, index) in ports"-->
<!--                    :key="index"-->
<!--                    :value="item.POT_CODE"-->
<!--                    :label="item.POT_CNAME"></el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-col :span="4">
              <el-form-item size="mini" label-width="10px">
                <el-button size="mini" type="primary" @click="searchList">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>

  </el-form>
  <div class="inner" ref="inner">
     <el-table
        :data="TableData"
        style="width:100%"
        border
        :height="maxHeight"
        max-height="300"
        :header-cell-style="{ textAlign: 'center' }"

        highlight-current-row
        @row-click="rowClick"
      >
        <el-table-column type="index" :index="indexMethod" align="center" label=" " width="50"></el-table-column>
        <!-- <el-table-column prop="fltId" label="供应商id"  sortable></el-table-column> -->
        <el-table-column prop="fltName" label="供应商名称"  sortable ></el-table-column>
        <el-table-column prop="fltLinkperson" label="联系人"  sortable></el-table-column>
        <el-table-column prop="fltLinkphone" label="联系电话"  sortable></el-table-column>
      </el-table>
      <el-pagination
        ref="pagination"
        class="pagination"
        small
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Pagination.currentPage"
        :page-sizes="Pagination.pageSizeList"
        :page-size="Pagination.PageSize"
        :layout="Pagination.layout"
        :total="Pagination.total">
      </el-pagination>
      </div>
    <!-- 分页 -->
<!--  <div class="block">-->
<!--      <el-pagination-->
<!--      ref="pagination"-->
<!--      class="pagination"-->
<!--      small-->
<!--      background-->
<!--      @size-change="handleSizeChange"-->
<!--      @current-change="handleCurrentChange"-->
<!--      :current-page="Pagination.currentPage"-->
<!--      :page-sizes="Pagination.pageSizeList"-->
<!--      :page-size="Pagination.PageSize"-->
<!--      :layout="Pagination.layout"-->
<!--      :total="Pagination.total">-->
<!--    </el-pagination>-->
<!--    layout="total, sizes, prev, pager, next, jumper"-->
<!--    </div>-->
  </el-dialog>
  </div>
</template>
<script>
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
import {checkSysfleetList} from '@/request/api'
export default{
  mixins: [resizeMixin, paginationMixin],
  data(){
    return{
      form:{
        cmpId:'', //必填
        cmpName:'',
        usrCode:'', //必填
        usrName:'', //必填
        usrStatus:'Y', //必填
        usrCellphone:'',
        usrEmail:'',
        remark:'',
        fltUuid:'-1', //必填
        creator:this.$store.state.user.USERNAME_DX_H
      },
      rules:{
        cmpName:[{required:true,message:'请输入供应商名称',trigger:['blur','change']}],
        usrCode:[{required:true,pattern:'',message:'请输入管理员账号',trigger:['blur','change']},
          {max:50,message:'输入字符请不要超过50个字段',trigger:['blur','change']}],
        usrName:[{required:true,message:'请输入管理员名称',trigger:['blur','change']},
          {max:25,message:'输入字符请不要超过25个字段',trigger:['blur','change']}],
        usrStatus:[{required:true,message:'请选择状态',trigger:['blur','change']}],
        usrCellphone:[{pattern:/^\d+$/,message:'请输入数字号码',trigger:['blur']}],
        // usrCellphone:[{pattern:/^[1][3,4,5,6,7,8,9][0-9]{9}$/,message:'请输入11位手机号码',trigger:['blur']}],
        usrEmail:[{pattern:/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/,message:'输入邮箱账号格式不正确',trigger:['blur']}],
        remark:[{max:150,message:'输入不能超过150个字段',trigger:['blur','change']}]
      },
      //港口信息
      ports:[],
      //分页
      PageIndexs:'',
      PageSizes:'',
      //新增下拉
      userform:{
        fltName:'',
        fltPorts:'',
        fltUuid:'-1'
      },

      //表格数据
      TableData:[],
      formInput:'50px',
      status:[{names:'可用',uuid:'1',code:'Y'},{names:'不可用',uuid:'2',code:'N'}],
      formLabelWidth:'120px',
      dialogTableVisible:false
    }
  },
  mounted(){
    //console.log(this.$store.state.user.USERNAME_DX_H);
    // console.log(this.$refs);
    this.$refs['addform'].resetFields()
    this.getUserList()
    //获取港口数据
    this.getPorts()
  },
  methods:{
    //获取港口
    getPorts () {
      // getPortsList().then(res => {
      //   // console.log(res,12222)
      //   this.ports = res.data.DXWCCYR
      // })
    },
    //选中一行
    rowClick(row){
      //this.rowData=row;
      // console.log(row,this.TableData);
      this.TableData.map(item=>{
        if(item.fltName==row.fltName){
          this.form.cmpId=item.uuid
        }
      })
      //console.log(this.form.cmpId,5555);
      this.form.cmpName=row.fltName
      this.dialogTableVisible=false
    },
    //searchList 查询按钮
    searchList(){
      this.getList()
    },
    //获取列表数据
    getList(){
      var PageSize=this.Pagination.pageSize
      var PageIndex=this.Pagination.currentPage
      var valid=Object.assign(this.userform,{PageSize,PageIndex})
      // console.log(valid,222)
      checkSysfleetList(valid).then(res=>{
        // console.log(res,333)
        this.Pagination.total= res.total
        this.TableData= res.data
      })
    },
    //获取用户数据
    getUserList(){
      this.resize = () => {
        this.maxHeight = this.$refs.inner.offsetHeight
      }
      this.getList()

      //this.getPorts();
    },
    //findUser查询用户
    findUser(){
      this.dialogTableVisible=true
    },
    cancel(){
      //console.log(this.$refs['form']);
      // this.$confirm('确定要关闭页面,已编辑的数据将不会保存','提示',{
      //   closeOnClickModal: false
      // }).then(()=>{
      this.$refs['addform'].resetFields()
      this.$emit('cancel')
      // }).catch(cancel=>{console.log(cancel)});

    },
    save(){
      this.$refs.addform.validate(valid => {
        if (valid) {
          this.$emit('save',this.form)
          this.$refs['addform'].resetFields()
        }
      })

      // this.$emit('save',this.form);
      // console.log(this.$refs,1111);

    }
  }
}
</script>
<style lang="scss" scoped>
.add{
  overflow:hidden;

  .row{
    overflow:hidden;
    //:1px solid #333;
    display:inline-flex;
    //width:30%;
  }
.dialog-footer{
  float:right;
}

}

</style>
